<template>
  <el-row :gutter="20">
    <el-col :span="24">
      <el-card style="height: 550px" class="usergt">
        <h2>个人帮扶记录</h2>

        <div class="cent">
          <el-button @click="resetDateFilter">清除日期过滤器</el-button>
          <el-button @click="clearFilter">清除所有过滤器</el-button>
          <el-table
            stripe
            border
            ref="filterTable"
            :data="tableData"
            style="width: 100%"
            height="550"
          >
            <el-table-column
              prop="date"
              label="日期"
              sortable
              width="180"
              column-key="date"
            >
            </el-table-column>
            <el-table-column prop="name" label="姓名" width="180">
            </el-table-column>
            <el-table-column prop="address" label="地址" :formatter="formatter">
            </el-table-column>
            <el-table-column
              prop="tag"
              label="标签"
              width="100"
              :filters="[
                { text: '完成', value: '完成' },
                { text: '未完成', value: '未完成' },
              ]"
              :filter-method="filterTag"
              filter-placement="bottom-end"
            >
              <template slot-scope="scope">
                <el-tag
                  :type="scope.row.tag === '未完成' ? 'primary' : 'success'"
                  disable-transitions
                  >{{ scope.row.tag }}</el-tag
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-card>
    </el-col>
    <el-col :span="8">
      <el-card style="height: 190px">
        <h2>帮扶总件数</h2>
        <p class="bftag" style="color: #000">1</p>
      </el-card>
    </el-col>
    <el-col :span="8">
      <el-card style="height: 190px">
        <h2>我的帮扶效果评价</h2>
        <p class="bftag">优</p>
      </el-card>
    </el-col>
    <el-col :span="8">
      <el-card class="ry" style="height: 190px">
        <h2>是否展示我的荣誉墙</h2>

        <el-switch
          v-model="value"
          active-color="#13ce66"
          inactive-color="#ff4949"
        >
        </el-switch>
        <br />
        <h3 class="text-ry">
          {{ value ? "当前已展示我的荣誉墙" : "已隐藏我的荣誉墙" }}
        </h3>
      </el-card>
    </el-col>
  </el-row>
</template>

<script>
export default {
  name: "MyDiary",
  data() {
    return {
      value: true,

      tableData: [
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
          tag: "完成",
        },
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
          tag: "完成",
        },
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
          tag: "完成",
        },
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
          tag: "完成",
        },
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
          tag: "完成",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
          tag: "未完成",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
          tag: "完成",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
          tag: "完成",
        },
      ],
    };
  },
  methods: {
    resetDateFilter() {
      this.$refs.filterTable.clearFilter("date");
    },
    clearFilter() {
      this.$refs.filterTable.clearFilter();
    },
    formatter(row) {
      return row.address;
    },
    filterTag(value, row) {
      return row.tag === value;
    },
    filterHandler(value, row, column) {
      const property = column["property"];
      return row[property] === value;
    },
  },
};
</script>
<style lang="less" scoped>
.usergt {
  margin-bottom: 25px;
}
.el-card {
  h2 {
    text-align: center;
  }
  .bftag {
    text-align: center;
    margin-top: 30px;
    font-size: 68px;
    color: #67c23a;
  }
}
.ry {
  text-align: center;
  h2 {
    margin-bottom: 20px;
  }
  .text-ry {
    margin: 20px 0;
  }
}
</style>